<template>
  <view class="category-wrap" style="padding-top: 88rpx" >
<!--    <u-navbar class="navbar" :is-back="false">-->
<!--&lt;!&ndash;      <div class="title">商品分类</div>&ndash;&gt;-->
<!--      &lt;!&ndash; #ifdef H5 &ndash;&gt;-->
<!--      <u-search class="nav-search"  @click.native="search" placeholder="请输入关键词搜索商品" :show-action="false"></u-search>-->
<!--      &lt;!&ndash; #endif &ndash;&gt;-->
<!--      &lt;!&ndash; #ifndef H5 &ndash;&gt;-->
<!--      <u-search class="nav-search" disabled @click.native="search" placeholder="搜索商品" :show-action="false"></u-search>-->
<!--      &lt;!&ndash; #endif &ndash;&gt;-->
<!--    </u-navbar>-->
    <!-- #ifdef H5 -->
    <u-search class="nav-search"   @click.native="search" placeholder="请输入关键词搜索商品" :show-action="false"></u-search>
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <u-search class="nav-search" disabled @click.native="search" placeholder="搜索商品" :show-action="false"></u-search>
    <!-- #endif -->
    <scroll-view scroll-x class="head1" scroll-with-animation style="" >
      <view style="text-wrap: nowrap">
        <view class="item" v-for="(item, index) in tabList" :key="index" @click="tabtap(item, index)">
          <view class="item-head">
            <view :class="item.id === currentId ?'item-1':'item-1-no'">
              <u-image width="96rpx" height="96rpx"  :src="item.image" :lazy-load="true"></u-image>
            </view>
            <view :class="item.id === currentId ?'item-2':'item-2-no'">
              <view class="item-text">{{ item.name }}</view>
            </view>
          </view>
        </view>

      </view>
    </scroll-view>
    <view class="content">

      <scroll-view scroll-y scroll-with-animation class="left-aside">
        <view v-for="(item, index) in categoryList" :key="item.id" class="f-item b-b" :class="{ active: item.id === currentTwoId }" @click="tabtapTwo(item, index)">
          {{ item.name }}
        </view>
      </scroll-view>
      <scroll-view scroll-with-animation scroll-y  enableBackToTop="true"  @scrolltolower="loadmore()" class="right-aside" >
        <!-- 头部图片 -->
        <view class="navbar">
          <view
              class="nav-item"
              :class="{ current: filterIndex === 0 }"
              @click="tabClick(0)"
          >综合排序</view
          >
          <view
              class="nav-item"
              :class="{ current: filterIndex === 2 }"
              @click="tabClick(2, 'price')"
          >价格升序</view
          >
          <view
              class="nav-item"
              :class="{ current: filterIndex === 1 }"
              @click="tabClick(1, 'price')"
          >价格降序</view
          >
          <img
              src="/static/img/filter-ico.png"
              alt=""
              class="img"
              @click="sortGoods"
          />
        </view>
        <view v-if="goodsList.length==0" style="display: flex;justify-content: center;align-items: center;flex-direction: column">
          <view
          ><image
              style="width: 360rpx; height: 260rpx"
              src="/static/nodata.png"
          ></image
          ></view>
          <view>
            <p class="tip-1">暂无数据</p>
          </view>
        </view>
        <view class="content1" v-for="(item) in goodsList" :key="item.id" @click="handleClick(item)">
            <view class="c-left">
              <u-image width="169rpx" height="169rpx"  :src="item.small" :lazy-load="true"></u-image>

            </view>
            <view class="c-right">
              <view class="c-title" :style="{textIndent: `${item.selfOperated?'66rpx':'0'}`}">
                {{ item.goodsName }}
              </view>
              <view class="c-tag" v-if="item.selfOperated">
                自营
              </view>
              <view class="c-juanList">
                <view  v-for="(item, index) in item.promotionTags" :key="index" style="display: flex;justify-content: center;align-items: center;" v-if="index<2">
                  <view class="c-item" v-if="item.includes('减')">
                    <view class="c-item-l">减</view>
                    <view class="c-item-r"> {{item}}</view>
                  </view>
                  <view class="c-item2" v-if="!item.includes('减')">
                    <view class="c-item-r"> {{ item }}</view>
                  </view>
                </view>
              </view>
              <view class="c-price">
                <view class="c-price-item">¥</view>
                <view class="c-price-item2">{{item.price}}</view>
              </view>
            </view>

        </view>
        <view style="height: 200rpx"></view>

      </scroll-view>
    </view>
    <u-popup border-radius="20" mode="right" width="90%" v-model="sortPopup">
      <!-- <view class="status_bar"></view> -->
      <view class="sort-box">
        <!-- <view class="sort-list">
					<view class="sort-item">
						<view class="sort-title">品牌</view>
						<view class="flex" v-if="sortData.brands">
							<view class="sort-brand-item" :key="brandsIndex" v-for="(brand, brandsIndex) in sortData.brands" @click="handleSort(brand, brandsIndex, 'brand')">
								<view
									class="sort-radius"
									:class="{
										'sort-active': brand.__selected
									}"
								>
									{{ brand.name }}
								</view>
							</view>
						</view>
						<u-empty v-else text="暂无品牌" mode="list"></u-empty>
					</view>
					<view class="sort-item">
						<view class="sort-title">全部分类</view>
						<view class="flex" style="flex-wrap: wrap;" v-if="sortData.categories">
							<view
								class="sort-brand-item"
								:key="categoriesIndex"
								v-for="(categoryId, categoriesIndex) in sortData.categories"
								@click="handleSort(categoryId, categoriesIndex, 'categoryId')"
							>
								<view
									class="sort-radius"
									:class="{
										'sort-active': categoryId.__selected
									}"
								>
									{{ categoryId.name }}
								</view>
							</view>
						</view>
						<u-empty v-else text="暂无分类" mode="list"></u-empty>
					</view>
				</view> -->
        <view class="sort-list">
          <view class="sort-item">
            <view class="sort-title">价格区间</view>
            <view style="display: flex; margin-top: 20rpx; align-items: center">
              <view class="sort-brand-item uinput">
                <view class="sort-radius"
                ><u-input
                    v-model="minPrice"
                    type="number"
                    placeholder="最低价"
                    input-align="center"
                /></view>
              </view>
              <view>-</view>
              <view class="sort-brand-item uinput">
                <view class="sort-radius"
                ><u-input
                    v-model="maxPrice"
                    type="number"
                    placeholder="最高价"
                    input-align="center"
                /></view>
              </view>
            </view>
          </view>
        </view>

        <!-- <view class="sort-list" v-if="sortData.paramOptions">
					<view class="sort-item" :key="paramIndex" v-for="(param, paramIndex) in sortData.paramOptions">
						<view class="sort-title">{{ param.key }}</view>
						<view class="flex" style="flex-warp:warp" v-if="param.values">
							<view class="sort-brand-item" :key="i" v-for="(value, i) in param.values" @click="handleSort(value, i, 'prop', param)">
								<view
									class="sort-radius"
									:class="{
										'sort-active': value.__selected
									}"
								>
									{{ value.title }}
								</view>
							</view>
						</view>
					</view>
				</view> -->

        <view class="sort-list">
          <view class="sort-item">
            <view class="sort-title">品牌</view>
            <view class="flex" v-if="sortData.brands">
              <view
                  class="sort-brand-item"
                  :key="brandsIndex"
                  v-for="(brand, brandsIndex) in sortData.brands"
                  @click="handleSort(brand, brandsIndex, 'brand')"
              >
                <view class="sort-radius">
                  {{ brand.name }}
                </view>
              </view>
            </view>
            <!-- <u-empty v-else text="暂无品牌" mode="list"></u-empty> -->
          </view>
        </view>

        <div class="null-view"></div>
        <view class="sort-btn mp-iphonex-bottom">
          <view class="sort-btn-repick" @click="repick">重置</view>
          <view class="sort-btn-confim" @click="sortConfim">确定</view>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
import { getCategoryList } from "@/api/goods.js";
import { getGoodsList, getGoodsRelated } from "@/api/goods.js";
export default {
  data() {
    return {
      currentId: 0,
      currentTwoId: 0,
      tabList: [], //上面标题列表
      categoryList: [], //右侧分类数据列表
      topImg: "", //顶部图片
      goodsList:[],
      sortPopup: false, //筛选的开关
      filterIndex: 0,
      cateId: 0, //已选三级分类id
      priceOrder: 0, //1 价格从低到高 2价格从高到低
      cateList: [],
      isShowSeachGoods: false,
      isShowKeywordList: false,
      sortData: "",
      isSWitch: false,
      // textList:['满10000减5','满10000享9折'],
      params: {
        pageNumber: 1,
        pageSize: 10,
        // sort: 'grade_asc',
        categoryId:'',
        sort:'showWeight',
        desc:'desc'
      },
      minPrice: "",
      maxPrice: "",
      sortParams: {
        pageNumber: 1,
        pageSize: 10,

        // price: "", //价格,示例值(10_30)
        // prop: "", //属性:参数名_参数值@参数名_参数值,示例值(屏幕类型_LED@屏幕尺寸_15英寸)
        // brandId:"", //品牌,可以多选 品牌Id@品牌Id@品牌Id
        categoryId: "",
      },

      routerVal: "",
    };
  },
  watch:{
    sortPopup(val) {
      if (val) {
        this.selectedWay = { brand: [], categoryId: [], prop: [] };
      }
    },
  },
  onLoad() {
    this.loadData();
    // #ifdef MP-WEIXIN
    // 小程序默认分享
    uni.showShareMenu({ withShareTicket: true });
    // #endif
  },
  methods: {
    handleClick(item) {
      uni.navigateTo({
        url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
      });
    },
    // 重置
    repick() {
      this.sortParams = {
        pageNumber: 1,
        pageSize: 10,
        categoryId: this.routerVal.category || "",
      };
      this.sortPopup = false;
      this.initSortGoods();
      this.minPrice = "";
      this.maxPrice = "";
      this.params = {
        pageNumber: 1,
        pageSize: 10,
        categoryId: this.routerVal.category || "",
      };
      this.goodsList = [];
      this.loadData();
    },
    //搜索
    async loadDataProduct(type, loading){
      this.loadingType = "loading";
      if (type == "refresh") {
        this.goodsList = [];
        this.params.pageNumber = 1;
      }
      let goodsList = await getGoodsList(this.params);
      // console.log(goodsList,'goodsList')
      if (goodsList.data.result.records.length < 10) {
        this.loadingType = "noMore";
        this.empty = true;
      } else {
        this.empty = false;
      }
      this.goodsList.push(...goodsList.data.result.records);
      uni.hideLoading();
    },
    //加更多
    loadmore(){
      this.params.pageNumber++;
      this.loadDataProduct();
    },
    // 筛选商品
    sortGoods() {
      this.sortPopup = true;
    },
    tabClick(index, type) {
      this.params.pageNumber = 1;
      this.params.pageSize = 10;
      // this.params.order = "desc";
      if (this.params.sort == type) {
        this.params.order == "asc"
            ? (this.params.order = "desc")
            : (this.params.order = "asc");

        this.$set(this.params, "sort", type);
      } else {
        this.params.order = "desc";
        this.$set(this.params, "sort", type);
      }

      if (index == 0) {
        this.params.sort = "showWeight";
        this.params.order = "desc";
      }
      if(index==1){
        this.params.sort = "price";
        this.params.order = "desc";
      }
      if(index==2){
        this.params.sort = "price";
        this.params.order = "asc";
      }
      this.filterIndex = index;

      uni.pageScrollTo({
        duration: 300,
        scrollTop: 0,
      });
      uni.showLoading({
        title: "正在加载",
      });
      this.loadDataProduct("refresh", 1);

    },
    /**
     * 查询
     */
    search() {
      uni.navigateTo({
        url: "/pages/navigation/search/searchPage",
      });
    },

    /**
     * 加载图片
     */
    async loadData() {
      let list = await getCategoryList(0);
      this.tabList = list.data.result;
      this.currentId = list.data.result[0].id;
      this.currentTwoId = list.data.result[0].children[0].id;
      this.params.categoryId = list.data.result[0].children[0].id
      this.loadDataProduct("refresh");
      this.loadListContent(0);
    },

    /**
     * 加载列表内容
     */
    loadListContent(index) {
      this.topImg = this.tabList[index];
      this.categoryList = this.tabList[index].children;
      this.currentTwoId = this.tabList[index].children[0].id;
    },
    /**
     * 一级分类点击
     */
    tabtap(item, i) {
      if (item.id != this.currentId) {
        this.currentId = item.id;
        this.loadListContent(i);
        this.params.categoryId = item.id
        this.loadDataProduct('refresh');
      }
    },
    /**
     * 一级分类点击
     */
    tabtapTwo(item, i) {
      if (item.id != this.currentTwoId) {
        this.currentTwoId = item.id;
        this.params.categoryId = item.id
        this.loadDataProduct('refresh');
      }
    },
    navigateToList(sid, tid) {
      uni.navigateTo({
        url: `/pages/navigation/search/searchPage?category=${tid}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content1{
  width:calc(100% - 12rpx);
  border-bottom: 1rpx solid #F2F2F2;
  //height: 219rpx;
  padding: 16rpx 0 35rpx 0 ;
  //background-color: #00d5d5;
  display: flex;
  justify-content: space-between;
  .c-left{
    width: 168rpx;
    border-radius: 8rpx;
    overflow: hidden;
    height: 168rpx;

  }
  .c-right{
    width: calc(100% - 12rpx - 168rpx);
    //background-color: yellow;

    position: relative;
    text-align: left;
    .c-title{
      overflow: hidden;
      width: 100%;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-align: left;
      font-size: 28rpx;
      line-height: 38rpx;
      margin-bottom: 12rpx;

    }
    .c-tag{
      position: absolute;
      left: 0;
      top: 6rpx;
      display: inline-block;
      height: 28rpx;
      font-size: 20rpx;
      color: white;
      background-color: red;
      padding: 0 8rpx;
      text-align: center;
      border-radius: 6rpx;
    }
    .c-juanList{
      width: 100%;
      display: flex;
      font-size: 20rpx;
      margin-bottom: 32rpx;
      .c-item{
        display: flex;
        border: 1rpx solid #FF8D97;
        border-radius: 4rpx;
        margin-right:12rpx;
        white-space: nowrap;
        .c-item-l{
          color: white;
          background-color: #FF4252;
          padding: 0 4rpx;

        }
        .c-item-r{
          color: #FF4252;
          background-color: white;
          padding: 0 4rpx;
        }
      }
      .c-item2{
        white-space: nowrap;
        display: flex;
        border: 1rpx solid #FF8D97;
        border-radius: 4rpx;
        margin-right:12rpx;

        .c-item-r{
          color: #FF4252;
          background-color: #FFECEE;
          padding: 0 4rpx;
        }
      }
    }
    .c-price{
        display: flex;
        align-items: baseline;
      width: 100%;
        flex-wrap: nowrap;
        .c-price-item{
            font-size: 24rpx;
            color: #FA2C19;
        }
       .c-price-item2{

        color: #FA2C19;
         font-size: 38rpx;
      }
    }
  }
}
.head1{
  height: calc(192rpx - 24rpx);width: 100%;
  padding-top: 24rpx;
  padding-left: 28rpx;
  .item{
    width: 120rpx;
    height: 144rpx;
    display: inline-block;
    flex-direction: column;
    overflow: hidden;
    margin-right: 16rpx;
    .item-head{
      width: 120rpx;
      height: 144rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      //background-color: #00a327;
      .item-1{
        width: 96rpx;
        height: 96rpx;
        border: 3rpx solid #00FFAD;
        border-radius: 100px;
        overflow: hidden;
        margin-bottom: 12rpx;
        //background-color: tan;
      }
      .item-2{
        width: 120rpx;
        height: 36rpx;
        background-color: #00FFAD;
        border-radius: 42rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        .item-text{
          font-size: 24rpx;
          color: black;
        }
      }
      .item-1-no{
        width: 96rpx;
        overflow: hidden;
        height: 96rpx;
        border: 3rpx solid white;
        border-radius: 100px;
        margin-bottom: 12rpx;
        //background-color: tan;
      }
      .item-2-no{
        width: 120rpx;
        height: 36rpx;
        background-color: white;
        border-radius: 42rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        .item-text{
          font-size: 24rpx;
          color: black;
        }
      }
    }
  }
}
page {
  height: 100%;
  background-color: #fdfaff;
}
/* 解决小程序和app滚动条的问题 */
/* #ifdef MP-WEIXIN || APP-PLUS */
::-webkit-scrollbar {
  display: none;
}
/* #endif */
/* 解决H5 的问题 */
/* #ifdef H5 */
uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
  /* 隐藏滚动条，但依旧具备可以滚动的功能 */
  display: none;
}
/* #endif */
.s-list {
  box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.05);
}
.nav-search {
  padding-left: 30rpx !important;
  padding-right: 20rpx !important;
}
.title {
  display: block;
  width: 259rpx;
  text-align: center;
   font-size: 28rpx;

 
}
.category-wrap {
  height: 100%;
  overflow: hidden;
  //background-color: yellow;
  background: linear-gradient(to bottom , rgba(0, 230, 147, 0.23) 0%, rgba(255, 255, 255, 0) 15%);

  .content {
    height: calc(100vh - 94px);
    display: flex;
    color: #333;
    font-size: 28rpx;
    background: #fff;
  }
  .left-aside {
    flex-shrink: 0;
    width: 184rpx;
    height: 100%;
    background-color: #f7f7f7;
  }
  .f-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 97rpx;
    position: relative;
    &.active {
      font-weight: bold;
      color: $light-color;
      background: #fff;
    }
  }
  .right-aside {
    flex: 1;
    overflow: hidden;
    padding: 40rpx 0 0 12rpx;
  }

  .top-img {
    width: 500rpx;
    height: 230rpx;
    border-radius: 8px;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .s-item {
    display: flex;
    align-items: center;
    height: 70rpx;
    padding-top: 16rpx;
    font-weight: 500;
  }
  .t-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 12rpx;
  }
  .margin-right {
    margin-right: 0 !important;
  }
  .t-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 150rpx;
    margin-right: 25rpx;
    font-size: 24rpx;
    padding-bottom: 20rpx;
    image {
      width: 140rpx;
      height: 140rpx;
      border-radius: 8px;
      margin-bottom: 20rpx;
    }
    ::v-deep .u-image {
      width: 140rpx !important;
      height: 140rpx !important;
      border-radius: 8px !important;
      margin-bottom: 20rpx !important;
    }
  }
}



.navbar {
  display: flex;
  width: 100%;
  height: 82rpx;
  z-index: 10;
  align-items: center;
  position: relative;

  // position: fixed;
  // left: 0;
  // top: var(--status-bar-height);
  .img {
    width: 36rpx;
    height: 36rpx;
    position: absolute;
    right: 20rpx;
    top: 23rpx;
  }

  .nav-item {
    // flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42rpx;
    font-size: 26rpx;
    color: $font-color-dark;
    position: relative;
    margin-right: 12rpx;
    background-color: #F2F2F2;
    border-radius: 8rpx;
    padding: 8rpx 12rpx;
  }

  .current {
    color: $light-color;
    position: relative;
    background-color: #E6FFF7;
    border-radius: 8rpx;
    padding: 8rpx 12rpx;

    // &:after {
    //   content: "";
    //   position: absolute;
    //   left: 50%;
    //   bottom: 0;
    //   transform: translateX(-50%);
    //   width: 40rpx;
    //   height: 0;
    //   border-bottom: 4rpx solid $light-color;
    // }
  }

  .p-box {
    display: flex;
    flex-direction: column;

    .yticon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30rpx;
      height: 14rpx;
      line-height: 1;
      margin-left: 4rpx;
      font-size: 26rpx;
      color: #888;
    }

    .xia {
      transform: scaleY(-1);
    }
  }
}
.sort-box {
  width: 100%;
  height: 100%;
  position: relative;
  background: #fff;

  .sort-list {
    margin: 20rpx 0;
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;

    >.sort-item {
      >.sort-title {
        margin: 20rpx 0;
        font-size: 26rpx;
        font-weight: bold;
        color: #212121;
      }
    }
  }
}
.null-view {
  height: 140rpx;
}

.sort-btn {
  display: flex;
  position: fixed;
  bottom: 0;
  height: 100rpx;
  left: 0;
  width: 100%;
  background: #fff;
  align-items: center;
  padding-bottom: 24rpx;

  >view {
    width: 50%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    margin: 0 20rpx;
    border-radius: 16rpx;
    font-size: 30rpx;
  }

  >.sort-btn-repick {
    color: #212121;
    background-color: #F2F2F2;
  }

  >.sort-btn-confim {
    color: #212121;
    background-color: #00E69C;
  }
}

</style>
